/* eslint-disable no-undef */
import React, { useEffect } from "react";
export default function BaiduMap() {
  useEffect(() => {

        const script = document.createElement("script");
        script.src =
          "https://api.map.baidu.com/getscript?v=1.0&type=webgl&ak=6rOTQcll16GQOYlSHHL6RZHoNNG0GdQX";
        script.async = true;
        script.onload = () => {
          // 在脚本加载完成后执行需要在地图加载完成后执行的代码
          // 例如初始化地图、添加控件等
          const map = new BMapGL.Map("mapContainer");
          // 其他地图相关代码...

          // 示例：添加一个标注点
          const point = new BMapGL.Point(116.404, 39.915);
          // const marker = new BMapGL.Marker(point);
          // map.addOverlay(marker);
          map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式
          map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
          map.centerAndZoom(point, 15);
          const scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
          map.addControl(scaleCtrl);
          const zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
          map.addControl(zoomCtrl);
          
          
        };

        document.body.appendChild(script);

        return () => {
          // 组件卸载时移除脚本
          document.body.removeChild(script);
        };
  }, []);
  return <div style={{width:'100%',height:'100%'}} id="mapContainer">BaiduMap</div>;
}
